<template>
  <ToolbarButton
    icon="i-mdi-table-column-plus-after"
    title="在右侧插入列"
    :disabled="!canAddColumnAfter"
    :large-icon="props.largeIcon"
    :hide-text="props.hideText"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
import { computed, inject, type Ref } from 'vue'
import type { Editor } from '@tiptap/vue-3'
import ToolbarButton from "../../../button/index.vue";

defineOptions({
  name: 'AddColumnAfter'
})

const props = withDefaults(
  defineProps<{
    largeIcon?: boolean;
    hideText?: boolean;
  }>(),
  {
    largeIcon: false,
    hideText: true,
  }
);

// 注入编辑器实例
const editor = inject<Ref<Editor>>('editor')

const canAddColumnAfter = computed(() => {
  return editor?.value?.can().addColumnAfter() ?? false
})

const handleClick = () => {
  editor?.value?.chain().focus().addColumnAfter().run()
}
</script>
